<template>
  <div class="indexTop">
    <el-menu
      :default-active="activeMenuMethod"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-row :gutter="0">
        <el-col v-for="(menu,index) in menuList" :offset="index===0?10:0" :span="2" :key="index">
          <el-menu-item :index="menu.menuPath">{{menu.menuName}}</el-menu-item>
        </el-col>
        <!--TODO -->
        <el-col :span="4">
          <span style="color: green">word</span>
        </el-col>
      </el-row>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'indexTop',
  data () {
    return {
      menuList: [
        {menuName: '博客', menuPath: '/blogArticleList'},
        {menuName: '留言', menuPath: '/message'},
        {menuName: '日志', menuPath: '2'},
        {menuName: '友链', menuPath: '213'},
        {menuName: '关于', menuPath: '21'}
      ]
    }
  },
  methods: {
    handleSelect (menuPath) {
      this.$router.push({name: menuPath, path: menuPath})
    }
  },
  computed: {
    activeMenuMethod () {
      let path = this.$route.path
      if (path === '/') {
        path = this.menuList[0].menuPath
        this.handleSelect(path)
      } else {
        for (let i in this.menuList) {
          const menu = this.menuList[i]
          if (path.includes(menu.menuPath)) {
            path = menu.menuPath
            break
          }
        }
      }
      return path
    }
  }
}
</script>

<style scoped>
  .el-menu {
    height: 100%;
  }

  .el-row {
    height: 100%;
  }

  .indexTop {
    width: 100%;
  }
</style>
